<template>
	<view class="page1">
		<view class="first_line"></view>
		<!-- 产品一 -->
		<view class="product" v-for="item in 8" :key="item">
			<view class="pro_top">
				<view class="pro_left"></view>
				<view class="pro_right">
					<view class="pro_title">
						<span class="pro_name">
							产品名称时光贷款
							<view class="pro_des">一句话描述</view>
						</span>
					</view>
					<view class="pro_main">
						<span class="pro_num">300000</span>
						<span class="pro_text">最高可借&nbsp;&nbsp;(元)</span>
						<view class="check headle" @click="detail">一键申请</view>
					</view>
				</view>
			</view>
			<view class="pro_bom">
				<view class="pro_bom1">
					<view class="bom_first">
						最低年利率
						<span class="blue_text">3%</span>
					</view>
					<view>最长借款期限：36个月</view>
				</view>
				<view class="text-color">
					今日已申请
					<span>{{ percent }}</span>
					%
				</view>
				<u-line-progress active-color="#0780FE" :show-percent="false" height="8rpx" inactive-color="#D8D8D8" :percent="percent" class="line"></u-line-progress>
			</view>
			<view class="bottom_line"></view>
		</view>
		<!--额度已满-->
		<view class="product">
			<view class="pro_top">
				<view class="pro_left"></view>
				<view class="pro_right">
					<view class="pro_title">
						<span class="pro_name">
							产品名称时光贷款
							<view class="pro_des">一句话描述</view>
						</span>
					</view>
					<view class="pro_main">
						<span class="pro_num">300000</span>
						<span class="pro_text">最高可借&nbsp;(元)</span>
						<view class="checkNo headle" @click="open">今日额度已满</view>
					</view>
				</view>
			</view>
			<view class="pro_bom">
				<view class="pro_bom1">
					<view class="bom_first">
						最低年利率
						<span class="blue_text">3%</span>
					</view>
					<view>最长借款期限：36个月</view>
				</view>
				<view class="text-red">11月19日可申请</view>
				<u-line-progress active-color="#0780FE" :show-percent="false" height="8rpx" inactive-color="#D8D8D8" :percent="100" class="lineFull"></u-line-progress>
			</view>
			<view class="bottom_line"></view>
		</view>
		<!-- 底部文字 -->
		<view class="bottom_text">已经到底部啦 ~~</view>
		<uni-popup ref="popup" type="center">
			<view class="pop">
				<image src="/static/icon/edufull.png" class="pop_img" />
				<view class="pop_text">今日额度已满</view>
				<view class="pop_con">明日00:00开放申请</view>
				<view>
					<button class="pop_conform" @click="close">我知道了</button>
				</view>
				<view class="pop_out" @click="close">
					<u-icon name="close" color="#ffffff" size="40"></u-icon>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isActive: 1,
			percent: 82,
			show: false
		}
	},
	methods: {
		detail() {
			uni.navigateTo({
				url: '/pages/loans/detail'
			})
		},
		open() {
			this.$refs.popup.open()
		},
		close() {
			this.$refs.popup.close()
		}
	},
	mounted() {}
}
</script>

<style lang="scss" scoped>
.page1 {
	padding: 0;
	margin-left: 32rpx;
	position: relative;
	letter-spacing: 1rpx;
	.first_line {
		position: absolute;
		width: 750rpx;
		height: 2rpx;
		background: #f3f3f3;
		top: 0;
		left: -32rpx;
		z-index: 2;
	}
}
// 产品模板样式
.product {
	padding: 34rpx 0rpx 38rpx 0rpx;
	width: 686rpx;
	height: 252rpx;
	background: #ffffff;
	opacity: 1;
	border-radius: 16px;
	box-sizing: border-box;
	margin-bottom: 24rpx;
	position: relative;
	.bottom_line {
		position: absolute;
		width: 100vw;
		height: 2rpx;
		background: #f3f3f3;
		bottom: 0;
		left: -32rpx;
	}
	.pro_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.pro_left {
			width: 96rpx;
			height: 96rpx;
			background: #3478f2;
			border-radius: 16rpx;
			// margin-right: 8rpx;
		}
		.pro_right {
			width: 574rpx;
			.pro_title {
				align-items: center;
				.pro_name {
					height: 50rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					position: relative;
				}
				.pro_des {
					width: 196rpx;
					height: 42rpx;
					// background: #ffe5ac;
					background-color: rgba(255, 229, 172, 0.5);
					// opacity: 0.5;
					border-radius: 8rpx;
					margin-left: 16rpx;
					color: #af8f5e;
					font-size: 24rpx;
					text-align: center;
					line-height: 42rpx;
					border-radius: 22px 22px 22px 0px;
					position: absolute;
					top: -21rpx;
					right: -212rpx;
				}
			}
			.pro_main {
				display: flex;
				justify-content: space-between;
				height: 74rpx;
				width: 100%;
				align-items: center;
				.pro_num {
					// width: 156rpx;
					height: 74rpx;
					font-size: 52rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #3478f2;
					margin-right: 24rpx;
				}
				.pro_text {
					display: inline-block;
					// width: 168rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #bdbdbb;
					text-align: center;
					// margin-right: 22rpx;
					opacity: 1;
				}
				.check {
					// display: flex;
					width: 164rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #ffffff;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					background: linear-gradient(180deg, #faca26 0%, #fe6747 100%);
					border-radius: 50rpx;
					border: none;
					text-align: center;
				}
				.checkNo {
					width: 196rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #ffffff;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					text-align: center;
					background: #ccc;
					border-radius: 50rpx;
				}
			}
		}
	}
	.pro_bom {
		display: flex;
		justify-content: space-between;
		margin-top: 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #bdbdbb;
		position: relative;
		.pro_bom1 {
			display: flex;
			letter-spacing: 1rpx;
			.bom_first {
				border-right: 2rpx solid #dddcde;
				padding-right: 8rpx;
				margin-right: 10rpx;
				.blue_text {
					font-size: 24rpx;
					font-weight: 400;
					color: #0780fe;
				}
			}
		}
		.text-color {
			font-size: 24rpx;
			font-weight: 400;
			color: #0780fe;
			margin-right: 0rpx;
		}
		.text-red {
			font-size: 24rpx;
			font-weight: 400;
			color: #fc1f1f;
			margin-right: 0rpx;
		}
	}
	.line {
		position: absolute;
		width: 152rpx;
		height: 8rpx;
		top: -20rpx;
		right: 0;
	}
	.lineFull {
		position: absolute;
		width: 152rpx;
		height: 8rpx;
		top: -20rpx;
		right: 20rpx;
	}
}
.bottom_text {
	margin: 0 auto;
	width: 230rpx;
	height: 40rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	margin-top: 118rpx;
	text-align: center;
	color: #464646;
}
//无推荐弹出框
.pop {
	width: 606rpx;
	height: 552rpx;
	border-radius: 16rpx;
	background-color: #ffffff;
	position: relative;
	padding: 64rpx 78rpx;
	.pop_img {
		width: 200rpx;
		height: 196rpx;
		margin-left: 122rpx;
	}
	.pop_text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #6f768b;
		text-align: center;
	}
	.pop_con {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		text-align: center;
		color: #fc1f1f;
		margin-top: 10rpx;
	}

	.pop_conform {
		margin-top: 35rpx;
		width: 448rpx;
		height: 88rpx;
		background-color: #3478f2;
		font-size: 18px;
		color: #ffffff;
		border-radius: 16rpx;
	}
	.pop_out {
		position: absolute;
		width: 64rpx;
		height: 64rpx;
		top: -84rpx;
		right: -20rpx;
	}
}
</style>
